<template>
  <div class="homeContainer">
    <!-- 头部 -->
    <div class="header">
      <!-- 头部的上半部分 -->
      <div class="top-header">
        <div class="leftText" @click="toHome">网易严选</div>
        <div class="search" @click="toSearch">
          <van-icon name="search" size="18" />
          <span>搜索商品，共109876款好物</span>
        </div>
        <div class="loginBtn" @click="toLogin">登录</div>
      </div>
      <!-- 头部的下半部分-scrollNav -->
      <div class="header-navs">
        <div class="wrapper" ref="wrapper">
          <div class="content">
            <!-- 推荐 -->
            <div
              class="navItem"
              :class="{ active: currentId === -1 }"
              @click="currentId = -1"
            >
              推荐
            </div>
            <!-- 其它分类 -->
            <div
              class="navItem"
              @click="changeNav($event, nav.extra.operationResource.categoryId)"
              :class="{
                active: currentId === nav.extra.operationResource.categoryId,
              }"
              v-for="(nav, index) in categoryList"
              :key="nav.index"
            >
              {{ nav.extra.operationResource.categoryName }}
            </div>
          </div>
        </div>
        <!-- 箭头 -->
        <p @click="toRotate = !toRotate">
          <van-icon :class="toRotate && 'rotate'" name="arrow-down" size="20" />
        </p>
      </div>
      <!-- 点击箭头出现的页面 -->
      <van-popup
        v-model="toRotate"
        position="top"
        :overlay-style="{ top: '50px' }"
        style="
           {
            height: '30%';
          }
        "
        duration="0"
      >
        <h2>全部频道</h2>
        <div class="popupList">
          <!-- 推荐 -->
          <div
            class="popupItem"
            :class="{ active: currentId === -1 }"
            @click="currentId = -1"
          >
            推荐
          </div>
          <!-- 其它分类 -->
          <div
            class="popupItem"
            v-for="(nav, index) in categoryList"
            :key="nav.index"
            :class="{
              active: currentId === nav.extra.operationResource.categoryId,
            }"
            @click="currentId = nav.extra.operationResource.categoryId"
          >
            {{ nav.extra.operationResource.categoryName }}
          </div>
        </div>
      </van-popup>
    </div>

    <div v-show="currentId === -1">
      <!-- 轮播图 -->
      <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in focusList" :key="item.id">
            <van-image :src="item.picUrl" lazy-load></van-image>
          </van-swipe-item>
        </van-swipe>
      </div>

      <!-- 服务种类 -->
      <div class="serviceCategory">
        <a v-for="(serve, index) in policyDescList" :key="serve.index">
          <van-icon :name="serve.icon" size="16" />
          <span class="serveText">{{ serve.desc }}</span>
        </a>
      </div>

      <!-- 商品分类 -->
      <Classify></Classify>
      <!-- 商城大体内容 -->
      <Content :categoryList="categoryList"></Content>
      <!-- 底部 -->
      <Footer></Footer>
    </div>
    <!-- 从首页去的商品分类页 -->
    <div v-show="currentId !== -1">
      <Card :currentId="currentId"></Card>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll';
import Classify from './components/Classify/Classify.vue';
import Content from './components/Content/Content.vue';
import Footer from './components/Footer/Footer.vue';
import Card from './components/Card/Card.vue';
import { mapGetters } from 'vuex';
export default {
  name: 'Home',
  data() {
    return {
      currentId: -1,
      toRotate: false,
    };
  },
  methods: {
    toHome() {
      this.$router.push('/');
    },
    toSearch() {
      this.$router.push('/search');
    },
    toLogin() {
      this.$router.push('/login');
    },
    changeNav(e, categoryId) {
      this.currentId = categoryId;
      this.scroll.scrollToElement(e.target, 0, 0);
    },
  },
  components: {
    Classify,
    Content,
    Footer,
    Card,
  },
  mounted() {
    this.$store.dispatch('getIndexData'),
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true,
        scrollX: true, //  沿着X轴滚动
      });
  },
  computed: {
    ...mapGetters(['indexData']),
    categoryList() {
      return (this.indexData.categoryHotSellModule || {}).categoryList || [];
    },
    focusList() {
      return this.indexData.focusList || [];
    },
    policyDescList() {
      return this.indexData.policyDescList || [];
    },
  },
};
</script>

<style lang="less" scoped>
.homeContainer {
  background-color: #eee;
  padding-bottom: 5px;
  height: 100%;
  .header {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 9999;
    .top-header {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      width: 375px;
      height: 50px;
      padding: 0 5px 0 5px;
      .leftText {
        font-size: 20px;
        font-family: '楷体';
        font-weight: 700;
      }
      .search {
        width: 230px;
        height: 35px;
        font-size: 14px;
        background-color: #ededed;
        border-radius: 4px;
        text-align: center;
        line-height: 35px;
        margin: 0 8px;
        .van-icon-search {
          vertical-align: middle;
          margin-right: 2px;
        }
      }
      .loginBtn {
        width: 35px;
        height: 25px;
        border: 1px solid #dd1a21;
        font-size: 10px;
        text-align: center;
        line-height: 25px;
        border-radius: 4px;
        color: #dd1a21;
      }
    }
    .header-navs {
      overflow: hidden;
      width: 100%;
      height: 45px;
      display: flex;
      .wrapper {
        width: 100%;
        height: 40px;
        .content {
          width: 280%;
          height: 40px;
          display: flex;
          .navItem {
            flex-shrink: 0;
            font-size: 14px;
            line-height: 40px;
            text-align: center;
            color: #333;
            width: 70px;
            height: 40px;
            box-sizing: border-box;
            margin: 0 20px 0 10px;
            &.active {
              border-bottom: 2px solid #dd1a21;
              color: #dd1a21;
            }
          }
        }
      }
      p {
        position: absolute;
        left: 31%;
        top: 18%;
        width: 65px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        box-sizing: border-box;
        color: #999;
      }
      i {
        transition: all 0.3s;
        z-index: 9999;
      }
      .rotate {
        transform: rotate(180deg);
      }
    }
    .van-popup--top {
      top: 50px;
    }
    h2 {
      font-size: 15px;
      margin-left: 10px;
    }
    .popupList {
      display: flex;
      flex-wrap: wrap;
      .popupItem {
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #fafafa;
        border: 1px solid #ccc;
        font-size: 13px;
        color: #333;
        margin: 10px 5px;
        border-radius: 4px;
        &.active {
          border: 1px solid #dd1a21;
          color: #dd1a21;
        }
      }
    }
  }
  .banner {
    height: 158px;
    .my-swipe {
      height: 158px;
    }
  }
  .serviceCategory {
    margin-top: 100px;
    background-color: #fff;
    height: 36px;
    display: flex;
    align-items: center;
    width: 375px;
    box-sizing: border-box;
    & > a {
      margin: 0 10px;
      text-align: center;
      line-height: 36px;
      display: flex;
      align-items: center;
      .van-icon {
        color: #dd1a21;
        margin-right: 2px;
      }
      .serveText {
        font-size: 13px;
      }
    }
  }
}
</style>

<style lang="less">
.banner {
  .van-swipe {
    position: relative;
    top: 62%;
    transform: translateZ(0);
    .van-swipe__indicator {
      width: 20px;
      height: 3px;
      position: relative;
      background-color: #fff;
      opacity: 0.4;
      border-radius: 0;
    }
    .van-swipe__indicator--active {
      opacity: 1;
    }
  }
  .van-image {
    height: 185px;
    width: 375px;
    position: relative;
    bottom: 0;
    .van-image__img {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 40%;
      transform: translateY(-50%);
    }
  }
}
</style>
